

import React, { useState } from 'react';
import { Link, history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Input, Card, Form, notification } from 'antd';
import PriceInput from './components/PriceInput';
import OptionMember from './components/OptionMember';
import ProForm, { ProFormText, ProFormRadio } from '@ant-design/pro-form';
import { create } from '@/services/tag/api'

const { Search } = Input;
const Category = () => {
    //标签类型
    const [tagType, setTagType] = useState('0');
    const size = 'sm';
    //表单属性
    const formProp = {
        layout: 'horizontal',
        labelCol: { span: 10 },
        onFinish: (values) => submit(values)
    }

    const checkPrice = (_, value) => {
        if (value.number > 0) {
            return Promise.resolve();
        }
        return Promise.reject(new Error('Price must be greater than zero!'));
    };

    const header = {
        title: '添加标签',
        breadcrumb: {
            itemRender: (route, params, routes, paths) => {
                return (
                    <Link to={route.path}>{route.breadcrumbName}</Link>
                )
            },
            routes: [
                {
                    path: '',
                    breadcrumbName: '用户',
                },
                {
                    path: '/member/tag',
                    breadcrumbName: '用户标签',
                },
                {
                    path: '',
                    breadcrumbName: '当前页面',
                },
            ],
        }
    }

    //提交表单
    const submit = (body) => {
        body.type = tagType
        create(body).then(data => {
            notification['success']({ message: '添加成功' })
            history.push('/member/tag')
        })
    }

    //标签类型选项
    const tag_type_options = [
        {
            label: '手动标签',
            value: '0',
        },
        {
            label: '自动标签',
            value: '1',
        }
    ]

    //是否启用选项
    const is_use_options = [
        {
            label: '启用',
            value: 'a',
        },
        {
            label: '禁用',
            value: 'b',
        }
    ]

    //标签类型表单项属性
    const tagTypeFormProp = {
        onChange: (e) => setTagType(e.target.value),
        name: "type",
        label: "标签类型",
        value: tagType,
        options: tag_type_options,
    }

    //标签名称表单项属性
    const tagNameFormProp = {
        width: size,
        name: "name",
        label: "标签名称",
        placeholder: "请输入分类名称",
        rules: [{ required: true, message: '分类名称为必填项!' }]
    }

    const autoTagType = (
        <PageContainer header={header}>
            <Card>
                <ProForm {...formProp}>
                    <ProFormRadio.Group {...tagTypeFormProp} />
                    <ProFormText {...tagNameFormProp} />
                    <Form.Item
                        // rules={[{ validator: checkPrice }]}
                        name="price"
                        label="条件类型"
                    >
                        <PriceInput />
                    </Form.Item>
                    <Form.Item
                        // rules={[{ validator: checkPrice }]}
                        name="member"
                        label="用户剔除"
                    >
                        <OptionMember />
                    </Form.Item>
                    <ProFormRadio.Group
                        name="isUse"
                        label="是否启用"
                        options={is_use_options}
                    />
                </ProForm>
            </Card>
        </PageContainer>
    )
    const handTagType = (
        <PageContainer header={header}>
            <Card>
                <ProForm {...formProp}>
                    <ProFormRadio.Group {...tagTypeFormProp} />
                    <ProFormText {...tagNameFormProp} />
                </ProForm>
            </Card>
        </PageContainer>
    )
    return tagType == '1' ? autoTagType : handTagType;
};
export default Category;